<script setup>
import { ref, onMounted } from 'vue'
import { reqGetPromotionList, reqEditPromotion } from '@/api/promotion'
import { computed } from 'vue'
import { showToast } from 'vant'
import { watch } from 'vue'
const searchValue = ref('')
const promotionList = ref([])
const loading = ref(false)
const page = ref(1)
const total = ref(0)
const refreshing = ref(false)

onMounted(() => {
  onRefresh()
})

const onRefresh = () => {
  page.value = 1
  total.value = 0
  refreshing.value = true
  getPromotionList()
}

watch(searchValue, (newVal) => {
  if (!newVal.trim()) {
    onRefresh()
  }
})

const getPromotionList = async () => {
  try {
    const result = await reqGetPromotionList({ page: page.value, userId: searchValue.value })
    if (result.code === 200) {
      if (page.value === 1) {
        promotionList.value = result.data.data
      } else {
        promotionList.value = promotionList.value.concat(result.data.data)
      }
      page.value++
      total.value = result.data.total
    }
  } finally {
    loading.value = false
    refreshing.value = false
  }
}

const status = computed(() => {
  return (val) => {
    switch (val) {
      case 1:
        return '待审核'
      case 2:
        return '审核通过'
      case 3:
        return '审核被拒绝'
    }
  }
})

const onSearch = () => {
  onRefresh()
}

const changePromotionStatus = async (id, status) => {
  const result = await reqEditPromotion(id, { status })
  if (result.code === 200) {
    showToast({ type: 'success', message: '操作成功' })
    onRefresh()
  } else {
    showToast({ type: 'fail', message: '操作失败' })
  }
}
</script>
<template>
  <div class="promotion-container">
    <van-search
      v-model="searchValue"
      show-action
      clearable
      placeholder="请输入用户id"
      @search="onSearch"
      clear-trigger="always"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="page * 10 >= total"
        finished-text="没有更多了"
        @load="getPromotionList"
      >
        <div v-for="item in promotionList" :key="item.id" class="promotion-item">
          {{ item.user_id }} {{ item.nickname }} {{ item.mobile }}
          {{ status(item.status) }}
          <!-- {{ status(item.status) }} -->

          <div v-if="item.status === 1">
            <van-button type="primary" size="small" @click="changePromotionStatus(item.id, 2)"
              >通过</van-button
            >
            <van-button
              type="danger"
              size="small"
              @click="changePromotionStatus(item.id, 3)"
              style="margin-left: 5px"
              >拒绝</van-button
            >
          </div>
          <span v-else-if="item.status === 2">审核通过</span>
          <span v-else>审核被拒绝</span>
        </div>
      </van-list>
      <van-back-top bottom="10vh" />
    </van-pull-refresh>
  </div>
</template>
<style lang="less" scoped>
.promotion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f5f5f5;
  padding: 10px;
  font-size: 12px;
}
</style>
